import { Component, h, Element } from '@stencil/core';

@Component({
  tag: 't-page-loading',
  styleUrl: 't-page-loading.scss',
  shadow: true,
})
export class TPageLoading {
  @Element() slot;

  renderSpan(renderContent: string) {
    return renderContent.split('').map((content, index) => <span class={`loading${index + 1}`}>{content}</span>);
  }

  render() {
    return <div class="body">{this.renderSpan('loading')}</div>;
  }
}
